<div class="flex flex-col w-full">
  <div class="flex justify-between items-center">
    <div class="tabs tabs-box tabs-lg text-primary w-fit">
      @for (tab of tabs; track $index) {
      <button role="tab" class="tab" [class.tab-active]="container === tab.value" (click)="setContainer(tab.value)">
        {{tab.label}}
      </button>
      }
    </div>
    @if (paginatedMessages()?.metadata; as metadata) {
    <app-paginator [hidden]="metadata.totalCount === 0" [pageNumber]="metadata.currentPage"
      [pageSize]="metadata.pageSize" [totalCount]="metadata.totalCount" [totalPages]="metadata.totalPages"
      (pageChange)="onPageChange($event)" />
    }
  </div>
</div>

<div class="overflow-x-auto mt-3">
  <table class="table bg-base-100 table-fixed w-full">
    <thead>
      <tr>
        <th class="w-2/9">Sender / Recipient</th>
        <th class="w-4/9">Message</th>
        <th class="w-2/9">Date</th>
        <th class="w-1/9"></th>
      </tr>
    </thead>
    <tbody>
      @for (message of paginatedMessages()?.items; track message.id) {
      <tr [class.font-bold]="isInbox && !message.dateRead"
        routerLink="/members/{{isInbox ? message.senderId : message.recipientId}}/messages"
        class="hover:bg-base-200 cursor-pointer">
        <td class="w-2/9">
          <div class="flex items-center gap-3">
            <div class="h-12 w-12">
              <img class="rounded-full" src="{{isInbox ? message.senderImageUrl 
                || '/user.png' : message.recipientImageUrl || '/user.png'}}"
                alt="image of member">
            </div>
            <div>{{isInbox ? message.senderDisplayName : message.recipientDisplayName}}</div>
          </div>
        </td>
        <td class="truncate w-4/9">{{message.content}}</td>
        <td class="w-2/9">{{message.messageSent | date: 'medium'}}</td>
        <td class="w-1/9">
          <button (click)="confirmDelete($event, message.id)" class="btn btn-circle btn-ghost text-error">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
            </svg>
          </button>
        </td>
      </tr>
      }
    </tbody>
  </table>
</div>